<template>
  <epgis-nav-container title="注册">
    <template #container>
      
      <div style= "height: 100%; width: 100%;background: white;" class="layoutVerticle">
        <div class="layoutHorizontal layoutCenter" style="margin-top: 80px;">
          <img src="@/assets/icon/register/phone.png"/>
        </div>
        <div class="layoutVerticle layoutCenter">
          <span style=" font-size: 16px; font-weight: bold; margin-top: 20px;">请填写你的手机号码</span>
          <span style="font-size: 14px; margin-top: 10px;">为了你的账号安全，需要填写手机号码</span>
        </div>

        <div class="layoutVerticle layoutCenter inputBorder" style=" margin-left: 20%;  margin-right: 20%; margin-top: 40px;font-size: 18px;">
          <van-field v-model="phone" label="" type="textarea" rows="1" autosize="" placeholder="请输入手机号码">
          </van-field>
        </div>

        <div @click="nextStep"  class="layoutVerticle layoutCenter " style="position: absolute;bottom: 68px; left: 0; right: 0; margin: 0 auto;">
          <img src="@/assets/icon/register/next.png" />
        </div>
        


      </div>
    </template>
  </epgis-nav-container>
</template>

<script>
import { Http, Uploader } from "@/common/HttpClient";
import { MapUtil } from "@/common/mapUtil";
import { NativeUtil } from "@/common/utils";
import * as turf from "@turf/turf";
import { Toast, Notify } from "vant";
export default {
  components: {},
  data() {
    return {
      phone:'',
    };
  },

  mounted() {

  },
  destroyed() {
  },
  activated() {

  },
  methods: {

    nextStep() {
      if(this.checkValue()){
        sessionStorage.setItem("registMsg",
          JSON.stringify(
            { phone: this.phone},
          )
        );
        this.$router.push({ name: 'RegisterSex' });
      }
    },

    checkValue(){
      if (!this.phone) {
        Notify({
            type: "danger",
            message: "请填写手机号码",
        });
        return false;
      } else {
        let regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if (!regTel.test(this.phone)) {
          Notify({
              type: "danger",
              message: "手机号码格式有误，请输入正确的手机号码",
          });
          return false;
        }
      }
      return true;
    },









    




  },
};
</script>

<style lang="less" scoped>

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .inputBorder{
    position: relative;
    padding: 8px 0px;
    &::after{
      position: absolute;
      box-sizing: border-box;
      content: '';
      pointer-events: none;
      bottom: 0%;
      border-bottom: 1px solid #ebedf0;
      width: 100%;
    }
    /deep/.van-field__control{
      font-size: 16px;
    }
  }

  /deep/.van-cell {
    padding: 0px 0px;
  }

  /deep/.van-field__control {
    text-align: center;
  }







</style>